<template>
	<view class="feedback-wrapper bg-primary full relative box">
		<view class="feedback-type feedback-common">
			<view class="header">
				<text>反馈类别</text>
			</view>
			<view class="type-list">
				<view class="type-item" v-for="(item,index) in typeEnum" :key="index"
					:class="{active: index === activeType}" @click="changeType(index)">
					<text>{{ item.label }}</text>
				</view>
			</view>
		</view>
		<view class="feedback-content feedback-common">
			<view class="header">
				<text>反馈内容</text>
			</view>
			<view class="textarea-wrap">
				<textarea class="textarea" placeholder="请输入内容" :maxlength="max" v-model="content"></textarea>
				<view class="textarea-footer">
					<text>{{ content.length }}/{{ max }}</text>
				</view>
			</view>
		</view>
		<view class="feedback-image feedback-common">
			<view class="header">
				<text>上传图片</text>
			</view>
			<view class="feedback-tip">
				<text>提供问题截图（可选填）</text>
			</view>
			<view class="upload-list">
				<view @click="chooseImage">
					<view class="image-item" v-if="showImage">
						<image class="full" mode="aspectFill" :src="image"></image>
					</view>
					<view class="upload-btn" v-else>
						<image src="../static/upload-icon.png" class="upload-icon" mode="aspectFill"></image>
					</view>
				</view>

			</view>
		</view>
		<view class="feedback-phone feedback-common">
			<view class="header">
				<text>联系方式</text>
			</view>
			<view class="phone-wrap">
				<input v-model="mobile" type="tel" placeholder="请输入手机号码" class="mobile-input" />
			</view>
		</view>
		<view class="confirm-btn">
			<u-button :loading="loading" @click="confirmHandle" type="primary" text="提交反馈" />
		</view>
	</view>
</template>

<script>
	import { uploadFile } from '@/utils/tool.js'
	export default {
		onLoad(ev) {},
		methods: {
			resetForm() {
				this.content = ''
				this.mobile = ''
				this.activeType = 0
				this.image = ''
			},
			async confirmHandle() {
				if (this.loading) return
				const payload = this.validate()
				if (!payload) return
				this.loading = true
				uni.showLoading({
					title: '正在提交',
					mask: true
				})
				const resp = await this.$request({
					url: '/UserIdea/addUserIdea',
					data: payload,
					method: "GET",
				})
				await this.$delay(300)
				const { code, msg } = resp
				uni.hideLoading()
				this.loading = false
				this.$toast({ title: msg })
				if (code !== 1) return
				this.resetForm()
			},
			validate() {
				const { showImage, image, mobile, content, activeTypeLabel } = this
				if (!content.length) return this.$toast({ title: '请输入反馈内容' })
				if (!showImage) return this.$toast({ title: '请上传图片' })
				if (!mobile.length) return this.$toast({ title: "请输入您的联系方式" })
				if (!uni.$u.test.mobile(mobile)) return this.$toast({ title: "请输入正确的联系方式" })
				return {
					category_name: activeTypeLabel,
					content,
					image,
					mobile
				}
			},
			chooseImage() {
				uni.chooseImage({
					count: 1,
					success: async ev => {
						const { tempFilePaths } = ev
						if (!tempFilePaths.length) return
						const [file] = tempFilePaths
						const [error, resp] = await uploadFile(file)
						if (error) {
							return this.$toast({ title: "上传失败,请重试" })
						}
						const { uri } = resp
						this.image = uri
					}
				})
			},
			changeType(index) {
				if (this.activeType !== index) {
					this.activeType = index
				}
			},
		},
		computed: {
			showImage() {
				const { image } = this
				return !!(image.length)
			},
			activeTypeLabel() {
				const { typeEnum, activeType } = this
				const target = typeEnum[activeType]
				if (!target) return 'bug'
				return target.label
			},
			typeEnum() {
				return [{
						label: 'bug',
						value: 0,
					},
					{
						label: '意见',
						value: 1,
					},
					{
						label: '吐槽',
						value: 2,
					},
					{
						label: '其他',
						value: 3,
					}
				]
			},
		},
		data() {
			return {
				loading: false,
				image: '',
				activeType: 0,
				content: '',
				max: 140,
				mobile: '',
			}
		}
	}
</script>

<style lang="scss" scoped>
	.feedback-wrapper {
		padding: 32rpx 0 env(safe-area-inset-bottom);

		.confirm-btn {
			margin-top: 64rpx;
			padding: 0 32rpx;
			box-sizing: border-box;

			::v-deep button {
				height: 80rpx;
				background: linear-gradient(135deg, #8BDCFF 0%, #E4FF68 100%);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: none;
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.9);

			}
		}

		.feedback-phone {
			margin-top: 16rpx;

			.phone-wrap {
				margin-top: 24rpx;

				.mobile-input {
					display: block;
					width: 100%;
					height: 60rpx;
					background: #FFFFFF;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.26);
					border: 2rpx solid rgba(0, 0, 0, 0.26);
					padding: 10rpx 16rpx;
					box-sizing: border-box;
				}
			}
		}

		.feedback-image {
			margin-top: 16rpx;

			.upload-list {
				display: flex;
				align-items: center;
				flex-flow: row wrap;
				margin-top: 24rpx;

				.image-item {
					width: 160rpx;
					height: 160rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-size: 0;
					overflow: hidden;
				}

				.upload-btn {
					width: 160rpx;
					height: 160rpx;
					background: #F3F3F3;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.upload-icon {
						width: 48rpx;
						height: 48rpx;
					}
				}
			}

			.feedback-tip {
				height: 40rpx;
				font-size: 24rpx;
				color: rgba(0, 0, 0, 0.4);
				margin-top: 8rpx;
				line-height: 40rpx;
			}
		}

		.feedback-common {
			padding: 24rpx 32rpx;
			box-sizing: border-box;
			position: relative;
			background-color: #FFFFFF;

			.header {
				height: 44rpx;
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.9);
				font-weight: bold;
				line-height: 44rpx;
			}
		}

		.feedback-content {
			margin-top: 16rpx;
			position: relative;

			.textarea-wrap {
				margin-top: 50rpx;

				.textarea-footer {
					margin-top: 16rpx;
					display: flex;
					justify-content: flex-end;
					height: 40rpx;
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.4);
					line-height: 40rpx;
				}

				.textarea {
					width: 100%;
					display: block;
					height: 192rpx;
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.4);
					line-height: 40rpx;
				}
			}

			&::after {
				content: "";
				display: block;
				position: absolute;
				left: 32rpx;
				right: 0;
				top: 94rpx;
				height: 1px;
				background-color: #E7E7E7;
			}

		}

		.feedback-type {


			.type-list {
				margin-top: 24rpx;
				display: flex;
				flex-flow: row nowrap;
				justify-content: space-between;

				.type-item {
					width: 132rpx;
					height: 60rpx;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					border: 2rpx solid rgba(0, 0, 0, 0.4);
					display: flex;
					align-items: center;
					justify-content: center;
					color: rgba(0, 0, 0, 0.6);
					font-size: 24rpx;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					overflow: hidden;

					&.active {
						background: linear-gradient(135deg, #8BDCFF 0%, #E4FF68 100%);
						color: rgba(0, 0, 0, 0.9);
						border-color: #8BDCFF;
					}
				}
			}
		}
	}
</style>